<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>选择区域信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <style>
        /*滚动条样式*/
        /*滚动条整体样式*/

        .innerbox::-webkit-scrollbar {
            width: 4px;
            /* Y轴拖拽条的宽度 */
            height: 6px;
            /* X轴拖拽条的高度 */
        }

        /*滚动条里面小方块*/

        .innerbox::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }

        /*滚动条里面轨道*/

        .innerbox::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }

        .currentArea span {
            color: green;
            font-weight: bold;
            font-size: large;
        }

        .layui-tree-txt {
            width: auto;
        }
    </style>
</head>

<body>
    <div style="padding: 0 10px;">
        <table class="layui-table">
            <tr>
                <td>
                    <div id="div_area" class="innerbox" style="height: calc(100vh - 90px); overflow-y: auto;"></div>
                </td>
            </tr>
        </table>
        <div style="text-align: center;">
            <button type="button" class="layui-btn layui-bg-blue" id="YjbtnSave">确定</button>
        </div>
    </div>

    <script src="/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/src/'
        }).extend({
            mytree: 'lib/extend/mytree'
        }).use(['index', 'mytree'], function () {
            var $ = layui.$,
                admin = layui.admin,
                main = layui.main,
                setter = layui.setter,
                tree = layui.mytree;

            var areaid = main.getPageParams("areaid");//父级区划

            var inst1;
            loadAreaTree();
            //行政区划-树形菜单
            function loadAreaTree() {
                admin.req({
                    url: 'system/area/GetUserArea',
                    type: 'get',
                    done: function (res) {
                        if (res.data.length > 0) {
                            inst1 = tree.render({
                                id: 'treeid',
                                elem: '#div_area',
                                data: res.data,
                                onlyIconControl: true, //是否仅允许节点左侧图标控制展开收缩                                    
                                showCheckbox: true,   //是否显示复选框
                                selAll: false, //同步子节点选中状态和同步父节点选中状态
                                text: {
                                    defaultNodeName: 'areaname' //节点默认名称
                                },
                                click: function (obj) {
                                    $(".layui-tree-set").removeClass('currentArea');
                                    $(obj.elem[0]).addClass('currentArea');
                                },
                                spread: function (obj) {
                                    if (obj.state == 'open') {
                                        setTimeout(() => {
                                            admin.req({
                                                url: 'system/area/GetAreas',
                                                data: {
                                                    pid: obj.data.id
                                                },
                                                type: 'get',
                                                done: function (res) {
                                                    tree.lazytree(inst1.config.id, obj.elem, res.data);
                                                }
                                            });
                                        }, 500);
                                    }
                                }
                                , setIds: {
                                    ids: areaid,//(需要展开的节点集合 必填项)
                                    getNodeUrl: 'system/area/GetPid', //(查找父节点-请求地址 必填项)
                                    getTreeUrl: 'system/area/GetAreas', //(查找tree元素-请求地址 必填项)
                                }
                            });
                        } else {
                            $("#div_area").html('暂无数据');
                        }
                    }
                });
            }

            //保存
            $("#YjbtnSave").click(function () { 
                var checkId = [];
                var checkName = [];
                $(".layui-form-checked").each(function () {
                    checkId.push($(this).prev()[0].value);
                    checkName.push($(this).next()[0].innerText);
                });
                if (checkId.length > 0) {
                    $("input[id$='areaid']", window.parent.document.body).val(checkId.join(',')); 
                    $("input[id$='areaname']", window.parent.document.body).val(checkName.join(','));
                    $("textarea[id$='areaname']", window.parent.document.body).val(checkName.join(','));
                    $("#search", window.parent.document.body).click();

                    var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                    parent.layer.close(index); //关闭弹层 
                } else {
                    layer.msg('请选择区域！', {
                        icon: 2
                    });
                }
            });

        });
    </script>
</body>

</html>